let headerHtmlstr = `
<div>
    <el-row class="headerBox" :gutter="20" :class="{'mainBg':pageId=='detail','detail1':true}">
        <el-col :span="4">
            <div class="el-menu-item lineHeight34">
                <a href="index.html"><el-image :src="'./img/logo1.png'" :fit="fit"></el-image></a>
            </div>
        </el-col>
        <el-col :span="16"><div class="grid-content bg-purple">
            <div class="myNav el-menu--horizontal el-menu">
                <template v-for="item in list">
                <div :key="item.id" slot="reference" class="el-menu-item" @click="changePage(item)" :class="{'actived':pageId===item.id}">
                    <span class="inlineBlock">{{item.text}}</span>                
                    <slot v-if="item.id===1"></slot>
                </div>
                </template>
            </div></div>
        </el-col>
        <el-col class="rightBox" :span="4">
            <div class="el-menu-item mainColor alignRight">
                <span class="pointer" @click="changeLanguage(lang)"><span class="iconfont">&#xe623;</span>{{lang?"EN":'中文'}}</span>
            </div></el-col>
    </el-row>
    <div style="height:82px;width:100%"></div></div>
`
// my-component.js
Vue.component('my-header', {
  props: ['page-id'],
  template: headerHtmlstr,
  data(){
    return{      
      actived:0,
      fit:'fill',
      lang:Number(localStorage.getItem('langType')),
    }
  },
  mounted(){
    console.log(this.lang)
  },
  computed:{
    list(){
        return [
        {id:1,text:'MAX N',href:''},
        {id:2,text:'MAX PRO',href:'detail.html'},
        {id:3,text:LANG[this.lang].quality,href:'qualification.html'},
        {id:4,text:LANG[this.lang].about,href:'about.html'},
        {id:5,text:LANG[this.lang].support,href:'support.html'},
      ]},
  },
  methods:{
    changePage(item){
        // $emit('changePage',id)
        if(item.id===1)return
        window.location.href=item.href
    },
    changeLanguage(){
        this.lang = Number(!Number(localStorage.getItem('langType')));
        // this.$parent.parentChangeLang(this.lang?'zh-CN':'en')
        localStorage.setItem('langType',this.lang)
        window.location.reload()
    }
  }
});

// 创建style元素
const headerStyle = document.createElement('style');
 
// 设置style内容box-shadow:0 11px 21px #ccc;
headerStyle.innerHTML = `    
  .headerBox {
    font-size:14px;color:#0068b5;font-weight:bold;margin:0 !important;position:fixed;top:0;left:0;width: 100vw;
    box-sizing: border-box;z-index: 99;padding:0 68px;padding-top:25px;background:#fff;
    &.mainBg{background-color: #f3f3f3;
        .el-menu{.el-menu-item:nth-child(1){background:#fff}}        
        .myNav.el-menu--horizontal .el-menu-item:hover{background:#fff}
        &.detail1{
        .el-menu{.el-menu-item:nth-child(1){background:#f3f3f3}}       
            .el-menu{.el-menu-item:nth-child(2){background:#fff}}        
            .myNav.el-menu--horizontal .el-menu-item:hover{background:#fff}
        }
    }
    .el-menu-item:focus, .el-menu-item:hover{background:transparent}
    * {
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none;    /* Firefox */
        -ms-user-select: none;     /* IE/Edge */
        user-select: none;         /* 标准语法 */
        }
    .el-image{width:130px}
    .lineHeight34{line-height:34px}
    .myNav{
        border-bottom:0px;justify-content: center;display:flex;
        &.el-menu{background-color:transparent}
        &.el-menu--horizontal .el-menu-item{
            margin:0 18px;text-align:center;
            height:57px;padding-bottom:25px;line-height:36px;font-size:14px;color:#0068b5;border-radius:8px 8px 0 0;
            &.actived{background:#f3f3f3;
            }
            &:hover{background:#f3f3f3}
            &:hover{
                .drawer{
                    display:block;top:82px;
                }
            }
        }
    }
    .rightBox{
        margin-right:-52px;
            .el-menu-item{
                line-height:34px;
                .iconfont{font-size:28px}
        }
    }
}
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 18px;
        font-style: normal;
        font-weight:normal;
        margin-right:5px;vertical-align:bottom;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color:#0068b5
    }
    @font-face {
        font-family: 'iconfont';
        src: url('/Web/fonts/iconfont.woff2') format('woff2'),
            url('/Web/fonts/iconfont.woff') format('woff'),
            url('/Web/fonts/iconfont.ttf') format('truetype');
    }
    .el-popover{
        box-sizing:border-box;box-shadow:none;-webkit-box-shadow:none;border:none;background:#f3f3f3;width:100%;margin:0;left:0 !important;padding:0;
        &[x-placement^=bottom]{margin-top:0}
    }
    @media screen and (max-width: 1440px) {
        .headerBox .el-image{width:98px}
    }
`;
 
// 将style元素添加到head中
document.head.appendChild(headerStyle);